<!--免费书籍列表-->
<template>
    <div class="bookListfree">
        <div class="topBtn">
          <span>限免抢读</span>
          <a href="" class="more">下载全部</a>
        </div>
        <div class="lists">
          <a @click="goXq(0)">
            <img src="../../../static/img/recommend1.jpg" alt="狩魔手记">
            <span>狩魔手记</span>
          </a>
          <a @click="goXq(1)">
            <img src="../../../static/img/recommend2.jpg" alt="狩魔手记">
            <span>狩魔手记</span>
          </a>
          <a @click="goXq(2)">
            <img src="../../../static/img/recommend3.jpg" alt="狩魔手记">
            <span>狩魔手记</span>
          </a>
          <a @click="goXq(3)">
            <img src="../../../static/img/recommend4.jpg" alt="狩魔手记">
            <span>狩魔手记</span>
          </a>
        </div>
    </div>
</template>

<script>
  export default {
    data () {
      return {
        msg: '13213'
      }
    },
    methods: {
      goXq (bookid) {
        this.$router.push( { name: 'bookinfo', params: { bookid: bookid }})
      }
    }        
  }
</script>


<style scoped>
  .bookListfree .topBtn{
    padding:14px;
    font-size: 14px;
    color:#999;
    position: relative;
  }
  .bookListfree .topBtn span{
    font-size: 14px;
    color:#999;
  }
  .bookListfree .topBtn a{
    font-size: 14px;
    color:#999;
    float: right;
      padding-right: 15px;
  }
  .bookListfree .lists{
    padding:14px;
    background: #fff;
    display: flex;
  }
  .bookListfree .lists a{
    font-size: 14px;
    color:#999;
    flex: 1;

  }
  .bookListfree .lists a img{
    width: 90%;
  }
  .bookListfree .lists a span{
    display: block;
    width: 90%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
  }
  .more::after{
    content: '';
    display: block;
    height: 24px;
    width: 24px;
    position: absolute;
    background: url(/static/img/right_dobule.png) no-repeat right center;
    background-size: 8px 13px;
    top: 11px;
    right: 15px;
    z-index: 99;
}
</style>
